<template>
	<view class="evaluate-page">
		<!-- 小区选择 -->
		<u-picker mode="multiSelector" v-model="show" :default-selector='idxs' :range="multiSelector"
			@columnchange="columnchange" @cancel="pickerCancel" @confirm="pickerConfirm"></u-picker>

		<!-- 类型选择 -->
		<u-picker mode="selector" v-model="typeShow" :default-selector="[typeIdx]" :range="types"
			@confirm="typeConfirm"></u-picker>

		<!-- 分数选择 -->
		<u-picker mode="selector" v-model="scoreShow" :default-selector="[scoreIdx]" :range="scores"
			@confirm="scoreConfirm"></u-picker>

		<!-- 小区 -->
		<view class="unit">
			<text class="t1">当前位置：{{unitName}}</text>
			<text class="t2" @click="() => show = true">切换目标</text>
		</view>

		<!-- 类型 -->
		<view class="unit">
			<text class="t1">当前类型：{{types[typeIdx]}}</text>
			<text class="t2" @click="() => typeShow = true">切换类型</text>
		</view>

		<!-- 评分列表 -->
		<view class="score-list" v-for="(item, idx) in form.module" :key="item.id">
			<view class="title">
				<view class="block"></view>
				<text class="t1">{{item.module_title}}</text>
				<text class="t2">{{item.module_score}}</text>
			</view>

			<view class="item" v-for="(item1, idx1) in item.subject" :key="item1.id">
				<text class="t1">{{item1.subject_title}}({{item1.score}})</text>
				<view class="input" @click="chooseScore(idx, idx1)">
					<image src="../../static/evaluate-input.png" mode="aspectFit"></image>
					<text
						:style="{color: item1.myScore ? '#131415' : '#DDDDDD'}">{{item1.myScore ? item1.myScore : '请选择'}}</text>
				</view>
				<text class="btn" @click="gotoRemark(idx, idx1)">备注</text>
			</view>
		</view>

		<!-- 备注 -->
		<view class="score-list">
			<view class="title">
				<view class="block"></view>
				<text class="t1">备注</text>
			</view>
			<textarea :value="vuex_evaluate.evaluationsheetmark" @input="remarkInput"/>
		</view>

		<!-- 联系号码 -->
		<view class="hot-line">
			<text class="t1">考评反馈热线</text>
			<text class="t2">{{form.mobile}}</text>
		</view>
		
		<!-- 提示 -->
		<view class="hint">
			<image src="../../static/question-mark.png" mode="aspectFit"></image>
			<text>整改提示</text>
		</view>
		<view class="hint2">
			<text>请及时查看各扣分项并进行整改。</text>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit" @click="submit">
			<text>提交考评单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				// 单位选择
				unitList: [],
				multiSelector: [],
				idxs: [0, 0],
				oldIdxs: [0, 0],
				unitName: '',
				// 类型选择
				typeShow: false,
				typeIdx: 0,
				types: ['年度', '半年度', '季度', '月', '周', '日'],
				// 分数选择
				scoreShow: false,
				scoreIdx: '0.0',
				scores: [],
				// 考评单
				form: {}
			};
		},
		onLoad() {},
		onShow() {
			this.getUnitList()
			this.getForm()
			this.$u.vuex('vuex_evaluate.type', this.types[0])
		},
		methods: {
			getUnitList() {
				const { scene_id } = this.vuex_evaluate
				this.$u.post('/evaluationunitlist', { scene_id }).then(res => {
					this.unitList = res

					const arr1 = []
					res.forEach(v => {
						arr1.push(v.community)
					})

					const arr2 = []
					res[0].residential_quarters.forEach(v => {
						arr2.push(v.residential_quarters)
					})
					this.multiSelector = [arr1, arr2]

					const item = res[0].residential_quarters[0]
					this.$u.vuex('vuex_evaluate.evaluation_unit_id', item.id)
					this.unitName = item.residential_quarters
				});
			},

			columnchange({ column, index }) {
				this.$set(this.idxs, column, index)
				if (column == 0) {

					const arr2 = []
					this.unitList[index].residential_quarters.forEach(v => {
						arr2.push(v.residential_quarters)
					})
					this.$set(this.multiSelector, 1, arr2)
					this.$set(this.idxs, 1, 0)
				}
			},

			pickerCancel() {
				this.idxs = this.oldIdxs
			},

			pickerConfirm() {
				this.oldIdxs = this.idxs
				const item = this.unitList[this.idxs[0]].residential_quarters[this.idxs[1]]
				this.$u.vuex('vuex_evaluate.evaluation_unit_id', item.id)
				this.unitName = item.residential_quarters
			},

			typeConfirm(e) {
				this.typeIdx = e[0]
				this.$u.vuex('vuex_evaluate.type', this.types[e[0]])
			},

			getForm() {
				const { scene_id } = this.vuex_evaluate
				this.$u.post('/evaluationdetail', { scene_id }).then(res => {
					this.form = res
					this.$u.vuex('vuex_evaluate.evaluation_sheet_id', res.id)
				});
			},

			chooseScore(idx, idx1) {
				console.log(222,this.form)
				const item = this.form.module[idx].subject[idx1]
				const arr = ['0.0']
				let score = 0.5
				while (score <= item.score) {
					arr.push(score)
					score += 0.5
				}

				this.scores = arr
				this.scoreShow = true
				uni.$off('scoreChange')
				uni.$once('scoreChange', res => {
					this.$set(item, 'myScore', res ? res : '0.0')
				})
			},

			scoreConfirm(e) {
				console.log(123,e)
				const idx = e[0]
				const score = this.scores[idx]
				console.log(1234,score)
				uni.$emit('scoreChange', score)
			},
			
			// 提交单项备注
			gotoRemark(idx, idx1) {
				const {module_id} = this.form.module[idx]
				const {subject_id} = this.form.module[idx].subject[idx1]
				uni.navigateTo({
					url: `../add-remark/add-remark?module_id=${module_id}&subject_id=${subject_id}`
				})
			},
			
			remarkInput(e) {
				this.$u.vuex('vuex_evaluate.mark', e.detail.value)
			},
			
			// 提交评分
			submit() {
				const arr = []
				let fail = false
				this.form.module.forEach(v => {
					const subject = []
					v.subject.forEach(s => {
						if(s.myScore) {
							subject.push({
								subject_id: s.subject_id,
								score: s.myScore
							})
						} else {
							fail = true
							return
						}
					})
					if(fail) return
					arr.push({
						module_id: v.module_id,
						subject
					})
				})
				if(fail) {
					uni.showToast({
						icon: 'none',
						title: '评分不完整'
					})
					return
				}
				
				this.$u.vuex('vuex_evaluate.data', JSON.stringify(arr))
				
				this.$u.post('/evaluationrecordsubmit', this.vuex_evaluate).then(res => {
					uni.showToast({
						title: '提交成功'
					})
				
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-page {
		.unit {
			margin-top: 20rpx;
			height: 100rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 44rpx;
			background-color: white;

			.t1 {
				color: #131415;
			}

			.t2 {
				color: #3D99BB;
			}
		}

		.score-list {
			.title {
				height: 84rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 44rpx;
				color: #131415;

				.block {
					width: 8rpx;
					height: 32rpx;
					background: #3D99BB;
					border-radius: 8rpx;
				}

				.t1 {
					width: 400rpx;
					margin-left: 18rpx;
				}

				.t2 {
					flex: 1;
				}
			}

			.item {
				height: 100rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				background-color: white;
				border-bottom: 1rpx solid #f5f5f5;

				.t1 {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #131415;
				}

				.input {
					position: relative;
					width: 126rpx;
					height: 46rpx;
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					image {
						position: absolute;
						width: 126rpx;
						height: 46rpx;
						z-index: 1;
					}

					text {
						position: absolute;
						width: 100rpx;
						height: 46rpx;
						z-index: 2;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 46rpx;
						color: #131415;
						text-align: center;
					}
				}

				.btn {
					margin-left: 20rpx;
					width: 80rpx;
					height: 46rpx;
					background: #3D99BB;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 46rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}

			textarea {
				width: 750rpx;
				height: 390rpx;
				padding: 30rpx;
				background-color: white;
			}
		}

		.hot-line {
			height: 100rpx;
			margin-top: 20rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;

			.t1 {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 44rpx;
				color: #131415;
			}

			.t2 {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #999999;
			}
		}
		
		.hint {
			padding: 18rpx 30rpx 0 30rpx;
			display: flex;
			align-items: center;
			
			image {
				width: 26rpx;
				height: 26rpx;
			}
			
			text {
				margin-left: 12rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #333333;
			}
		}
		
		.hint2 {
			padding: 10rpx 30rpx 0 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #999999;
		}
		
		.submit {
			margin: 54rpx auto 68rpx auto;
			width: 690rpx;
			height: 100rpx;
			background: #3D99BB;
			opacity: 1;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 100rpx;
			text-align: center;
			color: #FFFFFF;
			
			&:active {
				opacity: 0.4;
			}
		}
	}
</style>
